<template>
  <div class="page-container">
    <van-nav-bar
      title="商品详情"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe class="swipe-container" :autoplay="3000">
      <van-swipe-item
        v-for="(image, index) in detailsData.slider_image"
        :key="index"
      >
        <img v-lazy="image">
      </van-swipe-item>
    </van-swipe>

    <div class="content-box header-box">
      <div class="goods-price">￥{{ detailsData.price }}</div>
      <div class="goods-name">{{ detailsData.store_name }}</div>
    </div>
    <div class="content-box">
      <div class="content-title">商品详情</div>
      <div
        class="content-richText package-details"
        v-html="detailsData.store_info"
      />
    </div>
    <!-- <div class="content-box">
      <div class="content-title">购买须知</div>
      <div class="content-richText" v-html="detailsData.purchaseNotes" />
    </div> -->

    <van-goods-action>
      <van-button type="info" round @click="buyNow">立即购买</van-button>
    </van-goods-action>
  </div>
</template>

<script>
import { detail } from '@/api/goods'
import { userInfo } from '@/api/user'
import {
  Button,
  Card,
  Tag,
  Toast,
  Swipe,
  SwipeItem,
  GoodsAction,
  Icon,
  RadioGroup,
  Radio
} from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    [Card.name]: Card,
    [Tag.name]: Tag,
    [Toast.name]: Toast,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [Icon.name]: Icon,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  },
  data() {
    return {
      detailsData: {
        purchaseNotes: '有效期'
      },
      radio: '1'
    }
  },
  created() {
    this.getGoodsInfo(this.$route.query.id)
  },
  methods: {
    //  获取商品详情
    getGoodsInfo(id) {
      detail({ id }).then((res) => {
        if (res.error.code === 0) {
          this.detailsData = res.data
        }
      })
    },
    // 跳转购买确认页
    buyNow() {
      // 暂时这样处理验证登录
      userInfo().then((res) => {
        if (res.error.code === 0) {
          this.$router.push({
            name: 'confirmOrder',
            query: {
              detailsData: JSON.stringify(this.detailsData)
            }
          })
        }
      })
    },
    // 返回
    onClickLeft() {
      this.$router.push({ name: 'home' })
    }
  }
}
</script>
<style lang="less" scoped>
.page-container {
  height: 100vh;
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.swipe-container {
  height: 225px;
}
.swipe-container img {
  display: inline-block;
  width: 100%;
  height: 225px;
}
.van-goods-action {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  justify-content: flex-end;
  .van-button {
    width: 180px;
    height: 33px;
    margin-right: 10px;
  }
}
.content-box {
  background-color: #ffffff;
  margin-top: 10px;
}
.header-box {
  padding: 10px;
}
.content-title {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px;
  font-size: 14px;
  color: #868686;
}
.content-richText {
  padding: 10px;
  font-size: 14px;
}
.goods-price {
  color: #e56015;
  font-weight: bold;
  font-size: 18px;
}
.goods-name {
  font-size: 16px;
  line-height: 32px;
}
.pay-dialong-icon-close {
  position: absolute;
  right: 12px;
  top: 12px;
  &:hover {
    cursor: pointer;
  }
}
.pay-dialog-price {
  line-height: 80px;
  text-align: center;
  font-weight: bold;
  font-size: x-large;
  color: #e56015;
}
.pay-dialog-button-box {
  text-align: center;
  padding: 10px;
}
.pay-dialog-button {
  height: 35px;
  width: 100%;
}
.pay-container .van-cell__title {
  display: flex;
  > div {
    margin-left: 5px;
  }
}
</style>
